<template>
	<view class="height-picker" @click.stop="show">
		<slot />
		<view class="g-dp-mask" :class="{ show: pipkerShowFlag }" @click.stop="hide" @touchmove.stop.prevent
			catchtouchmove="true"></view>
		<view class="g-dp-content" :class="{ show: pipkerShowFlag }" @touchmove.stop.prevent catchtouchmove="true">
			<view class="g-dp-ctt-head">
				<view class="head-title">{{ title }}</view>
			</view>
			<view class="g-dp-ctt-time">

				<view class="head-title" style="text-align: center;">

					<picker mode="date" @change="onDateChange" >
						
						<text>{{selectedDate}}</text><text class="tn-icon-down-triangle" style="color: #000000;font-size: 16px;margin-left:2px;"></text>
					</picker>
				</view>
			</view>
			<view class="g-dp-ctt-wrapper">
				<view class="check-value">
					<text class="value">{{ tempValue }}</text>
					<text class="unit">{{ unit }}</text>
				</view>
				<view><scroll-ruler :min="min" :max="max" :point="point" :defaultValue="tempValue"
						@change="valueChange"></scroll-ruler></view>
			</view>
			<view class="g-dp-ctt-foot" :style="{ background: themeColor }">
				<view class="submit bot" @click.stop="onConfirm">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ScrollRuler from './scroll-ruler.vue';
	import dayjs from '@/dayjs.min.js'
	export default {
		components: {
			'scroll-ruler': ScrollRuler
		},
		props: {
			// 标题
			title: {
				type: String,
				default () {
					return '';
				}
			},
			// 单位
			unit: {
				type: String,
				default () {
					return '厘米';
				}
			},
			// 主题颜色
			themeColor: {
				type: String,
				default () {
					return '#0CC782';
				}
			},
			// 绑定数值
			value: {
				type: [Number, String],
				default: () => {
					return '';
				}
			},
			// 默认数值
			defaultValue: {
				type: [Number, String],
				default: () => {
					return '';
				}
			},
			// 最小值
			min: {
				type: Number,
				default: () => {
					return 100;
				}
			},
			// 最大值
			max: {
				type: Number,
				default: () => {
					return 230;
				}
			},
			// 是否小数
			point: {
				type: Boolean,
				default: () => {
					return false;
				}
			}
		},
		data() {
			return {
				pipkerShowFlag: false,
				tempValue: '',
				selectedDate: ''
			};
		},
		watch: {
			value: function(newVal, oldVal) {
				this.init();
			},
			defaultValue: function(newVal, oldVal) {
				this.init();
			}
		},
		created() {
			this.init();
			this.selectedDate = dayjs().format('YYYY-MM-DD')
		},
		methods: {
			onDateChange(event) {
				this.selectedDate = event.mp.detail.value;
			},
			valueChange(e) {
				this.tempValue = e;
			},
			show() {
				this.pipkerShowFlag = true;
			},
			hide() {
				this.pipkerShowFlag = false;
			},
			init() {
				let value = this.value || this.defaultValue;
				if (value) {
					this.tempValue = JSON.parse(JSON.stringify(Number(value)));
				} else {
					let halfNum = (this.min + this.max) / 2
					if (this.point) {
						this.tempValue = halfNum.toFixed(1);
					} else {
						this.tempValue = halfNum.toFixed(0);
					}
				}
			},
			onConfirm() {
				this.pipkerShowFlag = false;
				this.$emit('onConfirm', this.tempValue + ";" + this.selectedDate);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.g-dp-ctt-time {
		height: 88upx;
		background-color: #ffffff;
		padding: 0 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.g-dp-ctt-hd-btn {
			color: #333;
			font-size: 30upx;
			line-height: 42upx;
		}
	}

	.height-picker {
		position: relative;
		z-index: 999;

		.g-dp-mask {
			position: fixed;
			z-index: 1000;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.6);
			visibility: hidden;
			opacity: 0;
			transition: all 0.3s ease;
		}

		.g-dp-mask.show {
			visibility: visible;
			opacity: 1;
		}

		.g-dp-content {
			position: fixed;
			z-index: 1001;
			bottom: 0;
			right: 0;
			width: 100%;
			transition: all 0.3s ease;
			transform: translateY(100%);

			.g-dp-ctt-head {
				height: 88upx;
				background-color: #ffffff;
				padding: 0 40upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 20upx 20upx 0upx 0upx;
				border-bottom: 1upx solid #e5e5e5;

				.g-dp-ctt-hd-btn {
					color: #333;
					font-size: 30upx;
					line-height: 42upx;
				}
			}

			.g-dp-ctt-wrapper {
				height: 380upx;
				width: 100%;
				background-color: #ffffff;

				.check-value {
					height: 148upx;
					text-align: center;
					line-height: 148upx;

					.value {
						font-size: 48upx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #0cc782;
						line-height: 67upx;
						vertical-align: middle;
					}

					.unit {
						font-size: 22upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #0cc782;
						line-height: 30upx;
						padding-left: 8upx;
						vertical-align: middle;
						position: relative;
						top: 4upx;
					}
				}

				.scroll-ruler-wrap {
					height: 172upx;
					width: 100%;
					background-color: #f8f9fb;
				}
			}
		}

		.g-dp-content.show {
			transform: translateY(0);
		}

		picker-view-column {
			height: 480rpx !important;
		}

		.g-dp-ctt-foot {
			width: 100%;
			height: 96upx;

			// background: #0CC782;
			.submit {
				font-size: 32upx;
				text-align: center;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 96upx;
			}
		}

		.head-title {
			font-size: 32upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #222429;
			text-align: center;
			flex: 1;
		}
	}
</style>